'use client';
import { FC, Suspense, useEffect, useState } from 'react';
import { AboutPagesResponse, aboutPagesApi, aboutSearchApi } from './api';
import Link from 'next/link';
import MyLazyComponent from '@/components/lazyComponent';
type HomeProps = {
	params: {
		lng: string;
	};
};

// #----------- 上: ts类型定义 ----------- 分割线 ----------- 下: JS代码 -----------

const Home: FC<HomeProps> = ({ params: { lng } }) => {
	const [data, setdata] = useState<AboutPagesResponse[]>([]);

	const getData = async () => {
		try {
			const { data } = await aboutPagesApi();
			console.log(data);
			setdata(data);
		} catch (error) {
			console.log(error);
		}
	};

	const [String, setString] = useState('');

	const getSearchString = async () => {
		try {
			const { data } = await aboutSearchApi();
			setString(data);
		} catch (error) {
			console.log(error);
		}
	};
	useEffect(() => {
		getData();
		getSearchString();
	}, []);

	return (
		<>
			<div>home</div>
			<div>{String}</div>
			<div>
				{data.slice(0, 10).map((v, i) => {
					return (
						<div key={i} style={{ width: 500, height: 550 }}>
							<div>{v.gmt_create}</div>
							{/* <Link href={`/${lng}/home/details}`}>goto details</Link> */}
							<MyLazyComponent>
								<div style={{ width: 500, height: 500 }}>1</div>
							</MyLazyComponent>
						</div>
					);
				})}
			</div>
		</>
	);
};

export default Home;
